import React, {PureComponent} from "react";
import {Redirect} from "react-router-dom";
import {connect} from "react-redux";
import {Button, Input, LoginBox, LoginWrapper} from './style';
import {actionCreators} from "./store";

class Login extends PureComponent {
    render() {
        if (!this.props.loginStatus) {
            return (
                <LoginWrapper>
                    <LoginBox>

                        <Input placeholder='账号' ref={(input) => {
                            this.account = input;
                        }}/>
                        {/*通过ref。将这两个dom分别存在 this.account中和 this.password*/}
                        <Input placeholder='密码' type='password' ref={(input) => {
                            this.password = input
                        }}/>
                        {/*如果要传参数，必须使用箭头函数*/}
                        {/*<Button onClick={this.props.login}>登录</Button>*/}
                        <Button onClick={() => {
                            this.props.login(this.account, this.password);
                        }}>登录</Button>
                    </LoginBox>
                </LoginWrapper>
            );
        } else {
            //已经登录了则跳回到首页
            return <Redirect to='/'/>
        }

    }


}

const mapState = (state) => ({
    loginStatus: state.getIn(['login', 'login'])
})
const mapDispatch = (dispatch) => ({
    login(accountElement, passwordElement) {
        console.log(accountElement.value, passwordElement.value);
        dispatch(actionCreators.login(accountElement.value, passwordElement.value));

    }
})
export default connect(mapState, mapDispatch)(Login);